<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      个人中心
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <ion-grid>

    <ion-row>
      <ion-col>
      </ion-col>
      <ion-col size="auto">
        <ion-avatar>
          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589357540529&di=f71985f1d359826155523758c0fdbc31&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201609%2F28%2F20160928152633_KecBF.png">
        </ion-avatar>
      </ion-col>
      <ion-col>
      </ion-col>
    </ion-row>

    
    <ion-row >
      <ion-col>
      </ion-col>

      <ion-col size="auto" *ngIf="isLoginEd==true">
        <ion-label>{{username}}</ion-label>
      </ion-col>

      <ion-col size="auto" *ngIf="isLoginEd==false">
        <ion-label style="font-size: large;" (tap)="login()" >戳我登录</ion-label>
      </ion-col>

      <ion-col>
      </ion-col>
    </ion-row>



  </ion-grid>

  <ion-list style="margin-top: 100px;">
    <ion-item button (click)="showDetail('account')">
      <ion-icon slot="start" name="person-outline"></ion-icon>
      <ion-label>
        <h3>我的账户</h3>
      </ion-label>
      <ion-icon name="chevron-forward-outline"></ion-icon>
    </ion-item>

  </ion-list>

  <ion-list>
    <ion-item button (click)="showDetail('setting')">
      <ion-icon slot="start" name="settings-outline"></ion-icon>
      <ion-label>
        <h3>设置</h3>
      </ion-label>
      <ion-icon name="chevron-forward-outline"></ion-icon>
    </ion-item>

    <ion-item button (click)="showDetail('question')">
      <ion-icon slot="start" name="help-circle-outline"></ion-icon>
      <ion-label>
        <h3>问题与反馈</h3>
      </ion-label>
      <ion-icon name="chevron-forward-outline"></ion-icon>
    </ion-item>

    <ion-item button (click)="showDetail('about')">
      <ion-icon slot="start" name="information-circle-outline"></ion-icon>
      <ion-label>
        <h3>关于</h3>
      </ion-label>
      <ion-icon name="chevron-forward-outline"></ion-icon>
    </ion-item>

  </ion-list>

</ion-content>